<template>
  <div class="container">
    <el-card>
      <el-form
        ref="formRef"
        :inline="true"
        :model="form"
        :rules="rules"
        label-position="top"
      >
        <div class="demo-form-inline">
          <el-form-item label="库区编号" prop="code">
            <el-input v-model="form.code" style="width: 250px;margin-right:25px" :disabled="true" />
          </el-form-item>

          <el-form-item label="所属仓库" prop="namestore">
            <el-select
              v-model="form.namestore"
              placeholder="请选择"
              style="width: 250px;margin-right:25px"
            >
              <el-option label="1号仓库" value="1" />
              <el-option label="2号仓库" value="2" />
              <el-option label="3号仓库" value="3" />
            </el-select>
          </el-form-item>

          <el-form-item label="库区名称" prop="name">
            <el-input
              v-model="form.name"
              placeholder="请输入"
              style="width: 250px;margin-right:25px"
            />
          </el-form-item>

          <el-form-item label="温度类型" prop="temperatureType">
            <el-select
              v-model="form.temperatureType"
              style="width: 250px;margin-right:25px"
              placeholder="请选择"
            >
              <el-option label="常温" value="CW" />
              <el-option label="冷藏" value="LC" />
              <el-option label="恒温" value="HW" />
            </el-select>
          </el-form-item>

          <el-form-item label="承重类型" prop="bearingType">
            <el-select
              v-model="form.bearingType"
              style="width: 250px;margin-right:25px"
              placeholder="请选择"
            >
              <el-option label="重型" value="ZX" />
              <el-option label="轻型" value="QX" />
            </el-select>
          </el-form-item>

          <el-form-item label="用途属性" prop="useType">
            <el-select
              v-model="form.useType"
              style="width: 250px;margin-right:25px"
              placeholder="请选择"
            >
              <el-option label="入库缓存区" value="RKHCQ " />
              <el-option label="出库缓存区" value="CKHCQ" />
              <el-option label="存储区" value="CCQ" />
              <el-option label="分拣区" value="FJQ" />
              <el-option label="质检区" value="ZJQ" />
            </el-select>
          </el-form-item>

          <el-form-item label="负责人" prop="personName">
            <el-input
              v-model="form.personName"
              placeholder="请输入"
              style="width: 250px;margin-right:25px"
            />
          </el-form-item>

          <el-form-item label="联系电话" prop="phone">
            <el-input
              v-model="form.phone"
              placeholder="请输入"
              style="width: 250px;margin-right:25px"
            />
          </el-form-item>
        </div>
        <div style="margin-left:26px">
          <el-form-item label="库区状态" prop="status">
            <el-radio-group v-model="form.status">
              <el-radio :label="1">启用</el-radio>
              <el-radio :label="0">停用</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-divider />
        </div>
        <div class="btn">
          <el-button
            round
            style="width: 160px"
            @click="goback"
          >返回</el-button>
          <el-button
            type="success"
            round
            style="width: 160px"
            @click="submit"
          >提交</el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { loadKQ, areaDetail, newaddKQ, editKQ, editFn } from '@/api'
export default {
  data() {
    return {
      params: { // 查询库区的参数
        id: '',
        name: '',
        warehouseName: '',
        size: 10,
        current: 1
      },
      form: { // 表单数据
        code: '', // 库区编号
        namestore: '', // 所属仓库
        name: '', // 库区名称
        temperatureType: '', // 温度类型
        bearingType: '', // 承重类型
        useType: '', // 用途属性
        personName: '', // 负责人
        phone: '', // 联系电话
        status: 1,
        warehouseId: ''
      },
      rules: { // 校验规则
        code: [{ required: true, trigger: 'blur' }],
        namestore: [{ required: true, message: '请选择仓库类型', trigger: 'blur' }],
        name: [{ required: true, message: '请输入库区名称', trigger: 'blur' }],
        temperatureType: [{ required: true, message: '请选择温度类型', trigger: 'blur' }],
        bearingType: [{ required: true, message: '请选择承重类型', trigger: 'blur' }],
        useType: [{ required: true, message: '请选择用途类型', trigger: 'blur' }],
        personName: [{ required: true, message: '请输入负责人', trigger: 'blur' }],
        status: [{ required: true, trigger: 'blur' }]
      }
    }
  },
  async created() {
    if (this.$route.params.id !== 'null') {
      // 点击编辑的回显
      const res = await editKQ(this.$parent.id)
      this.form = res.data
    } else {
      const { data } = await loadKQ() // 点击新增时调用的 KQ接口
      this.form.code = data
    }
  },
  methods: {
    goback() { // 点击返回
      this.$emit('back')
    },
    submit() {
      this.$refs.formRef.validate(async(valid) => {
        if (!valid) return
        if (!this.form.id) { // 新增提交
          const { data } = await areaDetail(this.params)
          this.form.warehouseId = data.records[0].warehouseId // 此步是获取warehouseId
          await newaddKQ(this.form)
          this.$message.success('新增ok')
          this.goback()
        } else { // 编辑
          const { data } = await areaDetail(this.params)
          this.form.warehouseId = data.records[0].warehouseId
          await editFn(this.form)
          this.$message.success('编辑ok')
          this.goback()
        }
      })
    }
  }
}
</script>

<style lang="scss">
.demo-form-inline{
  display: flex;
flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
}
.btn {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
